<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- 
    插件：
      在vue生态中，除了vue本身，其它的所有的与vue相关的第三包都是以插件的形式提供。
      作用：是一种更加高级的代码复用技巧。可以在插件中集成之前说的代码复用技巧。
        如：
          可复用的组件，<router-view><router-link>
          混入：$router  $route 
          指令：
          过滤器：
          原型链：Vue.prototype.$http = fn;

    面试题：
      在vue项目中，封装过什么样的插件，只要有不错的插件，研究后都可以当成项目经验。
      说一下Vue.use有什么作用？说一下它背后做了什么？
      答：调用插件函数 或 install方法，并传入Vue实参。在函数中就可以书写要封装的内容了


    如何封装vue插件：
        写法1：const Plugin = {  install(Vue){  .... } }
        写法2：const Plugin = function(Vue){}

    使用插件：
        Vue.use(Plugin)

    vue-router  vuex 都是插件
   -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h2>{{name}} -- {{a}}</h2>
    <ml-button></ml-button>
    <hr>
    <span>{{price | rmb}}</span>
    <hr>
    <div v-color="'red'">我是一个小div</div>
    <hr>
    <button @click="fn">点我</button>
  </div>
  <script>
    let MlPlugin = {
      install(Vue) {
        // console.log("install...");
        Vue.mixin({
          data() {
            return {
              a: 666
            }
          }
        });
        Vue.component("ml-button", {
          template: `<div>我是一个小button</div>`
        });
        Vue.filter("rmb", val => ("$" + val.toFixed(2)))
        Vue.directive("color", function (el, binding) {
          el.style.color = binding.value;
        });
        Vue.prototype.$ml = function () {
          console.log("ml666...");
        }
      }
    }

    let MlPlugin2 = function (Vue) {
      console.log('mlplugin2...');
      Vue.prototype.eat = 123456789
    }

    Vue.use(MlPlugin)
    Vue.use(MlPlugin2)


    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name: "码路",
          price: 100
        }
      },
      methods: {
        fn() {
          this.$ml();
          console.log(this.eat);
        }
      },
    });
  </script>
</body>

</html>